<!--
 * @Author: Li Zengkun
 * @Date: 2022-07-26 10:02:41
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-08-14 10:27:13
 * @Description: 搜索结果
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
    <title>搜索结果</title>
</head>

<body>
    <header>
        <a id="return" href="javascript:history.back()">
            <img src="../img/右箭头.png" alt="">
        </a>
        搜索结果
        <p></p>
    </header>

    <div class="search-box fixed">
        <form>
            <input id="searchbar" type="text" placeholder="输入要寻找的商品">
            <span class="btn" id="search-button">
                <i class="fa fa-search" aria-hidden="true"></i>
            </span>
        </form>

        <nav class="result-nav">
            <a href="#" class="active">综合</a>
            <a href="#">销量</a>
            <a href="#">新品</a>
            <a id="sortByPrice">
                <span>
                    价格 
                </span>
                <span>
                    <i class="fa fa-caret-up" aria-hidden="true"></i>
                    <i class="fa fa-caret-down" aria-hidden="true"></i>
                </span>
            </a>
        </nav>

    </div>
    <a href="#" class=" return-top">
        <i class="fa fa-arrow-circle-up" aria-hidden="true"></i>
    </a>
    <div class="content" id="goods-content">
        <!-- 搜索成功 -->
        <ul id="result-list" class="result-list">
            <!-- 插入位置 -->
        </ul>


        <!-- 搜索无结果 -->
        <div id="no-result" class="no-result">
            <img src="../img/ip/暂无内容.svg" alt="">
            <div class="title">
                您搜索的商品还未上架
            </div>
            <div class="headline">猜你喜欢</div>
            <ul class="result-list">
                <li class="result-item">
                    <img src="../img/index/t (8).png" alt="">
                    <div class="content">
                        <div class="title">高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖</div>
                        <div class="info">一件能明显提升幸福感的小物件</div>
                        <div class="price">￥<span id="price">6969.77</span></div>
                    </div>
                </li>
                <li class="result-item">
                    <img src="../img/index/t (8).png" alt="">
                    <div class="content">
                        <div class="title">高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖</div>
                        <div class="info">一件能明显提升幸福感的小物件</div>
                        <div class="price">￥<span id="price">6969.77</span></div>
                    </div>
                </li>
                <li class="result-item">
                    <img src="../img/index/t (8).png" alt="">
                    <div class="content">
                        <div class="title">高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖</div>
                        <div class="info">一件能明显提升幸福感的小物件</div>
                        <div class="price">￥<span id="price">6969.77</span></div>
                    </div>
                </li>
                <li class="result-item">
                    <img src="../img/index/t (8).png" alt="">
                    <div class="content">
                        <div class="title">高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖</div>
                        <div class="info">一件能明显提升幸福感的小物件</div>
                        <div class="price">￥<span id="price">6969.77</span></div>
                    </div>
                </li>
                <li class="result-item">
                    <img src="../img/index/t (8).png" alt="">
                    <div class="content">
                        <div class="title">高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖</div>
                        <div class="info">一件能明显提升幸福感的小物件</div>
                        <div class="price">￥<span id="price">6969.77</span></div>
                    </div>
                </li>
                <li class="result-item">
                    <img src="../img/index/t (8).png" alt="">
                    <div class="content">
                        <div class="title">高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖</div>
                        <div class="info">一件能明显提升幸福感的小物件</div>
                        <div class="price">￥<span id="price">6969.77</span></div>
                    </div>
                </li>
                <li class="result-item">
                    <img src="../img/index/t (8).png" alt="">
                    <div class="content">
                        <div class="title">高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖</div>
                        <div class="info">一件能明显提升幸福感的小物件</div>
                        <div class="price">￥<span id="price">6969.77</span></div>
                    </div>
                </li>
                <li class="result-item">
                    <img src="../img/index/t (8).png" alt="">
                    <div class="content">
                        <div class="title">高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖</div>
                        <div class="info">一件能明显提升幸福感的小物件</div>
                        <div class="price">￥<span id="price">6969.77</span></div>
                    </div>
                </li>
                <li class="result-item">
                    <img src="../img/index/t (8).png" alt="">
                    <div class="content">
                        <div class="title">高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖</div>
                        <div class="info">一件能明显提升幸福感的小物件</div>
                        <div class="price">￥<span id="price">6969.77</span></div>
                    </div>
                </li>
                <li class="result-item">
                    <img src="../img/index/t (8).png" alt="">
                    <div class="content">
                        <div class="title">高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖</div>
                        <div class="info">一件能明显提升幸福感的小物件</div>
                        <div class="price">￥<span id="price">6969.77</span></div>
                    </div>
                </li>

            </ul>
        </div>
    </div>

</body>
<script src="../js/axios.min.js"></script>
<script type="module" src="../js/axios_config.js"></script>

<script type="module" src="../js/search_result.js"></script>


<style>
    form {
        width: 100%;
        padding: 2.4vw 2.67vw;
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;
    }
    
    form>input {
        width: 80.8vw;
        height: 8.93vw;
        background-color: #f4f8f7;
        border-radius: 2vw;
        border: none;
        text-indent: 3.33vw;
        font-size: 3.47vw;
        color: #7d7d7d;
    }
    
    form .btn {
        width: 10.4vw;
        height: 8.93vw;
        background-color: #c55a5c;
        border-radius: 0.53vw;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 4.13vw;
    }
    
    .return-top {
        width: 7.2vw;
        height: 7.2vw;
        opacity: 0.4;
        font-size: 7.2vw;
        position: fixed;
        bottom: 6vw;
        right: 2vw;
        color: #000000;
    }
    /* nav */
    
    nav {
        height: 11vw;
        border-bottom: 0.13vw solid #eeeeee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .search-box {
        position: sticky;
        top: 0;
        background: #fff;
        width: 100%;
        z-index: 999;
    }
    
    nav>a {
        width: 25%;
        height: 100%;
        line-height: 11vw;
        text-align: center;
        font-size: 3.47vw;
        color: rgba(0, 0, 0, 0.7);
    }
    
    nav .active {
        color: #c55a5c;
    }
    
    nav>a:last-child {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    nav>a:last-child span:last-child {
        display: flex;
        width: 4vw;
        flex-direction: column;
    }
    /* resultlist */
    
    .content {
        width: 100%;
        height: calc(100vh - 32.93vw);
        overflow-y: auto;
    }
    
    .result-list {
        width: 100%;
        box-sizing: border-box;
        padding: 0 3.47vw;
        background: #fff;
        overflow-y: auto;
    }
    
    .result-list .result-item>a {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 4.8vw 0;
    }
    
    .result-list .result-item img {
        width: 26.8vw;
        height: 25.33vw;
        border-radius: 0.67vw;
    }
    
    .result-list .result-item .content {
        position: relative;
        padding: 0;
        height: 25.33vw;
        padding-left: 3.47vw;
    }
    
    .result-list .result-item .content::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        height: 0.13vw;
        width: calc(100% - 3.47vw);
        background: #6e6e6e;
        opacity: 0.2;
    }
    
    .result-item .content .title {
        font-size: 3.47vw;
        height: 8vw;
        line-height: 4vw;
        letter-spacing: 0.09vw;
        color: #555555;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    
    .result-item .info {
        margin-top: 1.87vw;
        font-size: 2.67vw;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0vw;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        color: #999999;
    }
    
    .result-item .price {
        margin-top: 3.47vw;
        font-size: 2.4vw;
        line-height: 4.53vw;
        letter-spacing: 0.07vw;
        color: #c55a5c;
    }
    /* no-result */
    
    .no-result {
        width: 100%;
        background: #efefef;
        /* height: 56.53vw; */
        text-align: center;
        box-sizing: border-box;
        padding-top: 9.87vw;
    }
    
    .no-result img {
        width: 70vw;
    }
    
    .no-result>.title {
        font-size: 3.47vw;
        font-weight: normal;
        margin-top: 5.47vw;
        font-stretch: normal;
        line-height: 5.07vw;
        letter-spacing: 0.09vw;
        color: #000000;
        opacity: 0.56;
    }
    
    .no-result .result-list {
        margin: 0;
        text-align: left;
        padding-top: 2.8vw;
    }
    
    .no-result .result-list>li:first-child {
        margin-top: 0;
    }
    
    .no-result .headline {
        background: #fff;
        position: relative;
        margin-top: 12.67vw;
        font-size: 3.47vw;
        height: 12.13vw;
        line-height: 12.13vw;
        letter-spacing: 0.17vw;
        color: #555555;
    }
    
    .no-result .headline::after {
        content: '';
        position: absolute;
        height: 0.13vw;
        width: 10.67vw;
        background: #c55a5c;
        bottom: 3vw;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
</style>

</html>